<template>
	<div class="">
		<header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
		    <a class="mui-action-back mui-icon  mui-pull-left arr_left">
		    </a>
		    <h1 class="mui-title"><span @tap="change_collect_type('goods')">商品收藏</span><span class="top_abv_active">内容收藏</span></h1>
		    <a class="mui-pull-right  right_icon" @tap="to_del">
		        <img src="../../assets/images/my_shan.png"/>
		    </a>
		</header>
		<div class="mui-content">
       		<div class="collect_list">
		        <div :class="is_del|is_Del" v-for="(i,index) in list">
		            <div :class="is_del|is_Del_icon_show"><i :class="i.is_checked?'del_active':''" @tap="sel_del(index)"></i>
		            </div>
		            <div class="img fl"  @tap="onderurl('/home/modular/details?id='+i.id+'&type=0&status=0&types=1')"><img :src="i.pic" alt=""></div>
		            <div class="info">
	                    <div class="title content_title" v-html="i.name+i.id"></div>
	                    <div class="collect_num content_des" v-html="i.des"></div>
	                    <div class="bottom_info">
	                        <span class="price content_num"> <span v-html="i.collectnum+'人收藏'"></span> </span>
	                        <span class="content_date">  <span v-html="i.createtime"></span> </span>
	                        <!-- <span class="add_car_btn" v-show="!is_del" @click="add_buy_car(event,index)">加入购物车</span> -->
	                    </div>
	                </div>
		        </div>
		    </div>
		    <transition name="slide-fade">
		        <div class="bottom" v-show="is_del">
		            <!--<span @click="sel_all_del">全选</span>-->
		            <button class="btn_del" @tap="to_do_del">确认删除</button>
		        </div>
		    </transition>
    	</div>

	</div>
</template>

<script>
	export default {
	name:'collect_content',
	data(){
		return{
			user:'',
            list: [],
            is_del: false,
            list: [],
            select_list:'',
            sel_items:[]
		};
	},
	methods:{
		//跳转
		onderurl:function(url,val,type){
			let that = this;
			if(type == 1){
				that.$router.push({path:url,query: { goodsid:  val }});
			}else{
				that.$router.push(url);
			}
		},
    change_collect_type(type){
      this.$store.commit("updata_collect_type",type)
    },
		//选择
		sel_del: function (index) {
			let that = this;
            if (that.list[index].is_checked) {
				if(that.sel_items){
					for(var i = 0;i<that.sel_items.length;i++){
						if(that.sel_items[i]==that.list[index].delid){
							console.log('当前去掉标记的 delid -->'+that.list[index].delid)
							that.sel_items.splice(i, 1);
						}
					}
				}
				that.$set(that.list[index], 'is_checked', false)

            } else {
				that.sel_items.push(that.list[index].delid)
            	that.$set(that.list[index], 'is_checked', true)
            }
        },
		//删除
		to_do_del: function () {
			let that = this;
            if (this.sel_items == '' || this.sel_items == null) {
            	mui.toast("请选择要删除的文章");
            	return false;
            } else{
            	that.$axios.post("api/article/del_my_col",{del:JSON.stringify(that.sel_items)}).then(res=>{
					mui.toast("删除成功");
          this.get_data()
				});
            }

        },
        to_del: function () {
        	let that = this;
            that.is_del ? that.is_del = false : that.is_del = true;
        },
    get_data(){
      this.$axios.get("api/article/mycollect_art",{
        params:{
          uid:this.$store.state.account.user_info.uid
        }}
        ).then(res=>{
        if(res.code==1){
          this.list = res.data;
        }
      });
    }
	},
created(){
  this.get_data()
},

}
</script>


<style lang="less" scoped>
@import "../../../static/pxvalue.less";
@import "../../assets/less/my/collect_goods.less";
</style>
